import React, { useState } from 'react';
import { Avatar, Divider, Popover } from 'antd'
import { GithubOutlined, QqOutlined, WechatOutlined } from '@ant-design/icons'
import '../public/styles/component/author.css'

const Author = () => {

  const [face, setFace] = useState('http://img.codemobile.cn/web_author_face.png')
  const [intro, setIntro] = useState('座右铭：不为了写代码而写代码')

  return (
    <div className="author-div common-box">
      <div> <Avatar size={100} src={face} /></div>
      <div className="author-introduction">
        {intro}
        <Divider>社交账号</Divider>
        <Popover content={"1160917739@qq.com"}>
          <Avatar size={36} icon={<GithubOutlined />} className="account" />
        </Popover>
        <Popover content={"1160917739"}>
          <Avatar size={36} icon={<QqOutlined />} className="account" />
        </Popover>
        <Popover content={"13400160667"}>
          <Avatar size={36} icon={<WechatOutlined />} className="account" />
        </Popover>
      </div>
    </div>
  )
}

export default Author
